<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_表单练习</title>
</head>
<body>
    <!--  form表示整个表单 action属性用于提交表单收集的数据 #占位符，暂时提交到本页-->
    <!--  input是表单的输入控件
          name：控制控件的名字，没有name的控件无法提交值
          value：默认存在，用来保存用户在控件中输入框的默认值与按钮上的文字
          readonly：只读，用户无法修改但是可以提交值
          disabled：禁用，用户无法修改也无法提交值
          placeholder：提示文本占位符
          -->
    <!--  type属性控制控件的类型
          text普通文本输入框 submit提交按钮 password密码框
          reset重置 将所有控件重置为初始状态-->
    <form action="#">
        姓名1：<input type="text" name="uname1" placeholder="请输入姓名"><br>
        姓名2：<input type="text" name="uname2" placeholder="请输入姓名"><br>
        姓名3：<input type="text" name="uname3" value="rose"><br>
        姓名4：<input type="text" name="uname4" value="rose" readonly><br>
        姓名5：<input type="text" name="uname5" value="rose" disabled><br>
        密 码：<input type="password" name="pwd" placeholder="请输入密码" maxlength="6"><br>
        性 别：
        <input type="radio" name="gender" value="0" checked>男
        <input type="radio" name="gender" value="1">女 <br>
        爱好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="tt">烫头
        <input type="checkbox" name="hobby" value="hiphop">嘻哈
        <input type="checkbox" name="hobby" value="rock&roll">摇滚 <br>
        <label for="nickname">昵称：</label>
        <input type="text" id="nickname"><br>
        城 市：
        <select name="city">
            <option value="1">北京</option>
            <option value="2" selected>长沙</option>
            <option value="3">重庆</option>
            <option value="4">大理</option>
        </select><br>
        幸运色：<input type="color" name="luckyColor"><br>
        缩 放：<input type="range" name="sf"><br>
        文 件：<input type="file" name="uploadFile" value="点我上传"><br>
        生 日：<input type="date" name="birthday"><br>
        留言板：<textarea name="msg" style="resize: none"></textarea><br>
        <input type="checkbox" id="yes">
        <label for="yes">我怎么都得同意以上协议</label><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>